import {
  ElButton,
  ElCol,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElInput,
  ElRow,
  ElSpace,
  ElSwitch,
  ElTree
} from 'element-plus'
import { defineComponent } from 'vue'
import { VxeGrid } from 'vxe-table'

import type { IUserPageItem } from '@/apis'

import { ImportDialog, ResetPasswordDialog, UserDialog } from './components'
import { useDept, useGrid } from './hooks'
import styles from './index.module.css'

export default defineComponent({
  setup() {
    const { gridExtHook, selectedKey, ...gridRestHook } = useGrid()

    const deptHook = useDept({
      gridExtHook,
      selectedKey
    })

    return {
      gridRef: gridExtHook.gridRef,
      ...gridRestHook,
      ...deptHook
    }
  },
  render() {
    return (
      <div>
        <ElRow gutter={20}>
          <ElCol span={5}>
            <ElInput
              v-model={this.searchValue}
              placeholder="请输入部门名称"
              style={{
                marginTop: '6px',
                marginBottom: '10px'
              }}
            />
            {this.deptTreeData.length > 0 ? (
              <ElTree
                ref={(e: any) => (this.deptTreeRef = e)}
                data={this.deptTreeData}
                nodeKey="key"
                props={{
                  label: 'title',
                  children: 'children'
                }}
                defaultExpandAll
                expandOnClickNode={false}
                filterNodeMethod={this.handleFilterDept}
                onCurrent-change={this.handleSelectDept}
              />
            ) : (
              <div class={styles.emptyTree}></div>
            )}
          </ElCol>
          <ElCol span={19}>
            <VxeGrid ref={(e: any) => (this.gridRef = e)} {...this.gridConfig}>
              {{
                toolbar_buttons: () => (
                  <ElSpace>
                    <ElButton
                      v-permission="'system:user:add'"
                      type="primary"
                      plain
                      onClick={() => this.handleShowAdd()}
                    >
                      新增
                    </ElButton>
                    <ElButton
                      v-permission="'system:user:remove'"
                      type="danger"
                      plain
                      disabled={this.selectedIds.size === 0}
                      onClick={this.handleDeleteList}
                    >
                      删除
                    </ElButton>
                    <ElButton
                      v-permission="'system:user:import'"
                      type="primary"
                      plain
                      onClick={this.handleShowImport}
                    >
                      导入
                    </ElButton>
                    <ElButton
                      v-permission="'system:user:export'"
                      type="primary"
                      plain
                      disabled={!this.canExport}
                      onClick={this.handleExport}
                    >
                      导出
                    </ElButton>
                  </ElSpace>
                ),
                columns_status: ({ row }: { row: IUserPageItem }) => (
                  <ElSwitch
                    v-model={row.status}
                    activeValue="0"
                    inactiveValue="1"
                    onChange={() => this.handleToggleStatus(row)}
                  />
                ),
                columns_operation: ({ row }: { row: IUserPageItem }) =>
                  row.id !== '1' ? (
                    <ElSpace>
                      <ElButton
                        v-permission="'system:user:edit'"
                        type="primary"
                        size="small"
                        link
                        onClick={() => this.handleShowEdit(row)}
                      >
                        修改
                      </ElButton>
                      <ElButton
                        v-permission="'system:user:remove'"
                        type="danger"
                        size="small"
                        link
                        onClick={() => this.handleDelete(row.id)}
                      >
                        删除
                      </ElButton>
                      <ElDropdown>
                        {{
                          default: () => (
                            <ElButton type="primary" size="small" link>
                              更多
                            </ElButton>
                          ),
                          dropdown: () => (
                            <ElDropdownMenu>
                              <ElDropdownItem>
                                <ElButton
                                  v-permission="'system:user:resetPwd'"
                                  type="primary"
                                  size="small"
                                  link
                                  onClick={() => this.handleShowReset(row)}
                                >
                                  重置密码
                                </ElButton>
                              </ElDropdownItem>
                            </ElDropdownMenu>
                          )
                        }}
                      </ElDropdown>
                    </ElSpace>
                  ) : null
              }}
            </VxeGrid>
          </ElCol>
        </ElRow>
        {/* 新建/编辑用户 */}
        <UserDialog
          ref={(e: any) => (this.userDialogRef = e)}
          deptTreeData={this.deptTreeData}
          sexOptions={this.sexOptions}
          statusOptions={this.statusOptions}
          onSuccess={this.handleRefresh}
        />
        {/* 导入 */}
        <ImportDialog
          ref={(e: any) => (this.importDialogRef = e)}
          onSuccess={this.handleRefresh}
        />
        {/* 重置密码 */}
        <ResetPasswordDialog
          ref={(e: any) => (this.resetPasswordDialogRef = e)}
          onSuccess={this.handleRefresh}
        />
      </div>
    )
  }
})
